<?php echo $this->render('/public/header');?>
<script src="https://cdn.bootcss.com/element-ui/1.4.2/index.js"></script>
<link href="https://cdn.bootcss.com/element-ui/1.4.2/theme-default/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/localization/messages_zh.min.js"></script>
<style>
    label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: 700;
    }
    .error{
        color:red;
    }
    [v-cloak]{display: none}
</style>
<div class="col-lg-12" id="main">
    <div class="col-lg-4 col-md-4 col-xs-4" id="app" v-cloak>
        <button class="btn btn-success" onclick="javascript:window.history.go(-1);">返回</button>
        <form id="uploadform">
            <div class="form-group">
                <label label-for="date">预计出货日期</label>
                <input type="date" name="date" v-model="date" class="form-control" required />
            </div>
            <div class="form-group">
                <label>invoice编号</label>
                <input type="text" class="form-control" v-model="invoice" name="invoice" placeholder="invoice编号" required />
            </div>
            <div class="form-group">
                <label>pi编号</label>
                <input type="text" class="form-control" v-model="pi" name="pi" placeholder="Pi编号" required />
            </div>
            <div class="form-group">
                <label>发货状态</label>
                <select class="form-control" v-model="status">
                    <option value=1>生产中</option>
                    <option value=2>生产完</option>
                    <option value=3>仓库</option>
                    <option value=4>空/海上</option>
                    <option value=5>到港</option>
                    <option value=6>派送中</option>
                    <option value=7>已送达</option>
                </select>
            </div>
            <div class="form-group">
                <label>预计送达日期</label>
                <input type="date" class="form-control" v-model="predict_date" required name="predict_date" />
            </div>
            <div class="form-group">
                <label>客户名称</label><br/>
                <el-autocomplete
                popper-class="my-autocomplete"
                v-model="customer_name"
                :fetch-suggestions="querySearch"
                placeholder="请输入用户"
                @select="handleSelect"
                ></el-autocomplete>
            </div>
            <div class="form-group">
                <label>运货方式</label>
                <select class="form-control" v-model="ship_type">
                    <option value=1>海运</option>
                    <option value=2>空运</option>
                    <option value=3>快递</option>
                </select>
            </div>
            <div class="form-group">
                <label>快递公司</label>
                <select class="form-control" v-model="express_id">
                    <option v-for="v in express_type" :value="v.id">{{v.name}}</option>
                </select>
            </div>
            <div class="form-group">
                <label>产品</label>
                <input type="text" class="form-control"  v-model="product" required name="product" />
            </div>
            <div class="form-group">
                <label>重量(kg)</label>
                <input type="text" class="form-control" v-model="weight" />
            </div>
            <div class="form-group">
                <label>CBM</label>
                <input type="text" class="form-control" v-model="cbm" />
            </div>
            <div class="form-group">
                <label>件数</label>
                <input type="text" class="form-control" v-model="num" />
            </div>
            <div class="form-group">
                <label>送货地址</label>
                <input type="text" class="form-control"  v-model="address" required name="address" />
            </div>
            <div class="form-group">
                <label>实际送达日期</label>
                <input type="date" class="form-control" v-model="real_date" />
            </div>
            <div class="form-group">
                <label>备注</label>
                <input type="text" class="form-control" v-model="remark" />
            </div>
            <button class="btn btn-success">提交</button>
        </form>
    </div>

</div>
<script>

$(function(){
    $(".el-autocomplete").css('width','100%');
    $("#uploadform").validate();
})
    $.validator.setDefaults({
    submitHandler: function() {
        layer.confirm('确认提交',{},function(){
            var data = {};
            data.date          = vm.date;
            data.invoice       = vm.invoice;
            data.pi            = vm.pi;
            data.status        = vm.status;
            data.express_id    = vm.express_id;
            data.predict_date  = vm.predict_date;
            data.customer_num  = vm.customer_num;
            data.customer_name = vm.customer_name;
            data.ship_type     = vm.ship_type;
            data.product       = vm.product;
            data.address       = vm.address;
            data.weight        = vm.weight;
            data.cbm           = vm.cbm;
            data.num           = vm.num;
            data.real_date     = vm.real_date;
            data.remark        = vm.remark;
            $.post('/sell/shipment_add_act',{data:data},function(res){
                if(res.code==1)
                {
                    layer.confirm(res.msg,{},function(){
                        window.location.reload();
                    });
                }
                else
                {
                    layer.alert(res.msg);
                }
            },'json')
        });
    }
    });
var vm=new Vue({
el:"#app",
    data:
    {
        date:"",
            invoice:"",
            pi:"",
            status:"1",
            predict_date:"",
            customer_num:"",
            customer_name:"",
            ship_type:"1",
            express_id:"1",
            product:"",
            address:"",
            real_date:"",
            remark:"",
            weight:"",
            cbm:"",
            num:"",
            express_type:<?php echo json_encode($this->params['list']);?>,
    },
    methods:{
    //搜索函数
    querySearch(queryString, cb) {
    if(queryString!="")
    {
        $.post('/api/search_customer_by_like',{name:queryString},function(res){
            if(res.data)
            {
                cb(res.data);
            }

        },'json')
    }
    },
    //选择回调
    handleSelect(item) {
    this.customer_name = item.customer_name;
    this.customer_num = item.number;
    },

    },
    })
        </script>
<?php echo $this->render('/public/footer');?>
